<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>表单失焦验证</h1>
    <hr>

    <form name="regForm" action="1.php" method="post" onsubmit="return checkForm()">
        <table>
            <tr>
                <td>邮箱:</td>
                <td><input type="text" name="email" onblur="checkEmail()"></td>
                <td id="etab">* 必填项,请填写常用有邮箱</td>
            </tr>
            <tr>
                <td>用户名:</td>
                <td><input type="text" name="user" onblur="checkUser()"></td>
                <td id="utab">* 必填项....</td>
            </tr>
            <tr>
                <td>密码:</td>
                <td><input type="password" name="pass" onblur="checkPass()"></td>
                <td id="ptab">* 必填项...</td>
            </tr>
            <tr>
                <td>确认密码:</td>
                <td><input type="password" name="repass" onblur="checkRepass()"></td>
                <td id="rptab">* 必填项....</td>
            </tr>
            <tr>
                <td></td>
                <td><button>注册</button></td>
            </tr>
        </table>

    </form>

    <script>

        // 检测邮箱
        function checkEmail(){
            var email = document.regForm.email.value;
            var etab = document.getElementById('etab');

            if (email.search(/^[\w-]+@[\w-]+(\.\w+){1,3}$/) == -1) {
                etab.innerHTML = '* 邮箱格式不正确..';
                etab.style.color = '#f00';
                return false;
            } else {
                etab.innerHTML = '* 通过验证';
                etab.style.color = '#0a0';
                return true;
            }
        }

        function checkUser(){
            var user = document.regForm.user.value;
            var utab = document.getElementById('utab');

            if (user.search(/^\w{6,12}$/) == -1) {
                utab.innerHTML = '* 用户名格式不正确,6-12位  数字字母下划线';
                utab.style.color = '#f00';
                return false;
            } else {
                utab.innerHTML = '* 通过验证';
                utab.style.color = '#0a0';
                return true;
            }
        }

        function checkPass(){
            var pass = document.regForm.pass.value;
            var ptab = document.getElementById('ptab');

            if (pass.length < 6 || pass.length > 18) {
                ptab.innerHTML = '* 密码长度不合法';
                ptab.style.color = '#f00';
                return false;
            } else {
                ptab.innerHTML = '* 通过验证';
                ptab.style.color = '#0a0';
                return true;
            }
        }


        function checkRepass(){
            var pass = document.regForm.pass.value;
            var repass = document.regForm.repass.value;
            var rptab = document.getElementById('rptab');

            if (repass !== pass) {
                rptab.innerHTML = '* 两次密码不一致';
                rptab.style.color = '#f00';
                return false;
            } else {
                rptab.innerHTML = '* 通过验证';
                rptab.style.color = '#0a0';
                return true;
            }
        }


        function checkForm(){
            return checkEmail()  && checkUser()  && checkPass()  && checkRepass();
        }

    
    </script>
</body>
</html>